<template>
  <el-dialog title="入库申请" :visible="warehousingVisible" @close="closeDialog" :center="true" width="70%"
             :close-on-click-modal="false">
    <el-row>
      <el-col>单位:{{ company }}</el-col>
      <el-col>日期:{{ date }}</el-col>
    </el-row>
    <el-table :data="warehousingData" :border="true" size="mini">
      <el-table-column label="序号" min-width="5%" type="index">
      </el-table-column>
      <el-table-column label="名称" min-width="12%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" size="mini" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="物料编码" min-width="8%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.code" size="mini" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="规格/型号" min-width="20%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.model" size="mini" :disabled="true"></el-input>
        </template>

      </el-table-column>
      <el-table-column label="单位" min-width="5%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.unit" size="mini" :disabled="true"></el-input>
        </template>

      </el-table-column>
      <el-table-column label="数量" min-width="5%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.number" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="含税单价" min-width="8%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.unitPriceIncludingTax" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="价税合计" v-if=false>
        <template slot-scope="scope">
          <el-input v-model="scope.row.totalPriceTax" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="税率" min-width="8%">
        <template slot-scope="scope">
          <el-select v-model="scope.row.taxRate" size="mini">
            <el-option
                v-for="item in optionsTaxRate"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="未税单价" min-width="8%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.unitPriceBeforeTax" size="mini" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="未税金额" min-width="8%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.amountBeforeTax" size="mini" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="项目号" min-width="13%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.project" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="入库地点" v-if=false>
        <template slot-scope="scope">
          <el-select v-model="scope.row.positionName" size="mini">
            <el-option
                v-for="item in optionsAddress"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col>采购:{{ purchasePerson }}</el-col>
      <el-col>保管:</el-col>
      <el-col>验收:</el-col>

    </el-row>
    <el-row>
      <el-col :span="24">
        <el-input type="textarea" size="mini" rows="3" placeholder="请填写处理意见"
                  v-model="warehousingComment"></el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="applyWarehousing" size="mini">确 定</el-button>
      <el-button type="primary" @click="cancle" size="mini">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "WarehousingForm",
  props: {
    warehousingVisible: Boolean,
    warehousingData: Array,
    company: String,
    date: String,
    optionsTaxRate: Array,
    optionsAddress: Array,
    purchasePerson: String,
    warehousingComment: String
  },
  watch: {
    'warehousingData': {
      handler: function (newVal, oldVal) {
        newVal.forEach(row => {
          this.calculateRowData(row);
        });
      },
      deep: true
    }
  },
  methods: {
    calculateRowData(row) {
      if (row.unitPriceIncludingTax && row.taxRate && row.number && row.number > 0) {
        console.log(row.taxRate)
        const taxRateDecimal = parseFloat(row.taxRate);
        const totalPriceTax = parseFloat(row.unitPriceIncludingTax) * row.number;
        const amountBeforeTax = parseFloat(totalPriceTax) / (1 + taxRateDecimal);
        const unitPriceBeforeTax = parseFloat(row.unitPriceIncludingTax) / (1 + taxRateDecimal);
        row.totalPriceTax = totalPriceTax.toFixed(2); // 保留两位小数
        row.unitPriceBeforeTax = unitPriceBeforeTax.toFixed(2); // 保留两位小数
        row.amountBeforeTax = amountBeforeTax.toFixed(2); // 保留两位小数
      }
    },
    applyWarehousing() {
      this.warehousingData.forEach(item => {
        item.purchasePerson = this.purchasePerson
      })
      const warehousingInfo = {
        warehousingMaterialDTOS: this.warehousingData,
        approvalCommentDTO: {
          comment: this.warehousingComment
        }
      }
      this.$emit('update:warehousingVisible', false)
      this.$emit('warehousingApplied', warehousingInfo)
    },
    cancle() {
      this.$emit('update:warehousingVisible', false)
    },
    closeDialog() {
      this.$emit('update:warehousingVisible', false)
    }
  }
}
</script>


